<template>
	<view class="listLi">
		<view class="state">{{ stateText }}</view>
		<view class="cardHeader">
			<view class="img">
				<image src="@/static/images/Shop/service.png"></image>
			</view>
			<view class="cont">
				<view class="titleCard">
					<text class="text">{{ tag }}</text>
					<view class="titleCardOver">{{ title }}</view>
				</view>
				<view class="nums">
					<text class="priceCard">*{{ num }}</text>
					<view class="USDTnum">
						<text>
							{{ price }}
							<text class="unit">USDT</text>
						</text>
					</view>
				</view>
			</view>
		</view>
		<view class="cardBottom" v-if="state === 3 ? false : true">
			<!-- 使用includes进行判断如果有数组中的某一项就进行显示 否则相反 -->
			<view class="Cancel" v-if="[1].includes(state)" @click="Cancel(id)">取消订单</view>
			<view class="EDITOR">
				<view class="edit" v-if="[1].includes(state)" @click="edit(id)">修改地址</view>
				<view class="search edit" v-if="[4, 2].includes(state)" @click="search(id)">查看物流</view>
				<view class="edit" v-if="[5].includes(state)" @click="Delete(id)">删除订单</view>
				<view class="payment" v-if="[1].includes(state)" @click="payment(id)">立即支付</view>
				<view class="payment" v-if="[4, 2].includes(state)" @click="receiveGoods(id)">立即收货</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { onShow } from '@dcloudio/uni-app';
import { defineProps, ref } from 'vue';
// 传值的接收者
const props = defineProps({
	id: {
		type: [Number, String]
	},
	title: {
		type: String
	},
	image: {
		type: String
	},
	state: {
		type: Number
	},
	tag: {
		type: String
	},
	price: {
		type: [Number, String]
	},
	num: {
		type: [Number, String]
	}
});
// 定义一个状态转换的变量，进行判断的数据
let stateNum = ref(0);
const stateText = ref('');
// 页面展示时促发
onShow(() => {
	/*
		switch 判断该组件是哪一种状态，然后进行变量数值编码的转换
			1 待付款2 已付款 3待发货 4 待收货 5已完成 6 取消
		 */
	// console.log(props.state)
	switch (props.state) {
		case 1:
			stateText.value = '等待卖家付款';
			break;
		case 2:
			stateText.value = '已付款';
		case 3:
			stateText.value = '待发货';
			break;
		case 4:
			stateText.value = '待收货';
			break;
		case 5:
			stateText.value = '已完成';
			break;
		case 6:
			stateText.value = '取消';
			break;
		default:
			console.log('订单错误');
	}
});
// 取消订单时触发函数
const Cancel = (id: number | string): void => {
	console.log('取消订单----id', id);
};
// 取消订单时触发函数
const payment = (id: number | string): void => {
	console.log('支付----id', id);
	uni.navigateTo({
		url: '/subdue/duePag/index?id=' + id
	});
};
// 取消订单时触发函数
const edit = (id: number | string): void => {
	console.log('修改----id', id);
};
// 查看物流时触发函数
const search = (id: number | string): void => {
	console.log('查看物流----id', id);
	uni.navigateTo({
		url: '/subdue/logistics/index?id=' + id
	});
};
const Delete = (id: number | string): void => {
	console.log('删除订单----id', id);
};
const receiveGoods = (id: number | string): void => {
	const url = ``;
	console.log('确认收获----id', id);
};
</script>

<style lang="scss" scoped>
.cardHeader {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	padding-bottom: 23px;

	.img {
		image {
			width: 160px;
			height: 160px;
		}
	}

	.cont {
		width: 100%;
		margin-left: 24px;

		.nums {
			margin-top: 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.priceCard {
				color: #6c6c6e;
				font-size: 24px;
			}

			.USDTnum {
				color: white;
				font-size: 32px;

				.unit {
					font-size: 24px;
				}
			}
		}

		.titleCard {
			width: 400px;
			align-items: center;
			display: flex;
			height: 45px;
			padding-top: 25px;
			font-size: 32px;
			color: white;

			.text {
				margin-right: 8px;
				white-space: nowrap;
				font-size: 20px;
				border: 1px solid #7f7f81;
				padding: 0 10px;
				height: 32px;
				line-height: 32px;
				display: inline-block;
				color: #ffffff;
				text-align: center;
				border-radius: 16px;
			}

			.titleCardOver {
				width: 400px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
}

.listLi {
	// height: 369px;
	width: 686px;
	background: #2a2b2e;
	border-radius: 16px;
	margin: 0 auto;
	margin-bottom: 24px;
	box-sizing: border-box;
	padding: 0 30px 0 32px;

	.state {
		padding-top: 24px;
		box-sizing: border-box;
		height: 72px;
		font-size: 28px;
		text-align: right;
		color: #f8444d;
	}

	.cardBottom {
		position: relative;
		border-top: 1px solid #979797;
		height: 108px;
		font-size: 28px;
		color: white;

		.Cancel {
			position: absolute;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			color: white;
		}

		.EDITOR {
			position: absolute;
			top: 50%;
			right: 0;
			width: 344px;
			transform: translateY(-50%);
			display: flex;
			justify-content: right;

			.edit {
				border: 1px solid #878889;
				background-color: transparent;
				color: white;
				padding: 14px 28px;
				font-size: 26px;
				box-sizing: border-box;
				border-radius: 10px;
				margin-right: 17px;
			}

			.payment {
				color: white;
				background-color: #4e47ff;
				border: 0;
				border-radius: 10px;
				padding: 14px 28px;
				font-size: 26px;
			}
		}
	}
}
</style>
